<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<c:set var="context"
	value="${pageContext.request.servletContext.contextPath}" />
<!-- Message box -->
<div id="dialog-not-allow" title="Information">
	<p>
		<span class="ui-icon ui-icon-alert"
			style="float: left; margin: 0 7px 20px 0;"></span>You can't do this action!
	</p>
</div>

<div id="dialog-confirm" title="Delete Confirm">
	<p>
		<span class="ui-icon ui-icon-alert"
			style="float: left; margin: 0 7px 20px 0;"></span>Do you want to
		delete?
	</p>
</div>

<div id="dialog-confirm-part" title="Delete Confirm">
	<p>
		<span class="ui-icon ui-icon-alert"
			style="float: left; margin: 0 7px 20px 0;"></span>Do you want to
		delete?
	</p>
</div>

<div id="dialog-alert" title="Delete Alert">
	<p>
		<span class="ui-icon ui-icon-alert"
			style="float: left; margin: 0 7px 20px 0;"></span> Can't delete!
	</p>
</div>
<div id="dialog-ok" title="Delete Success">
	<p>
		<span class="ui-icon ui-icon-alert"
			style="float: left; margin: 0 7px 20px 0;"></span> Deleted!
	</p>
</div>
<!-- Template for all sub-pages -->
<div id="portal_main_content" align="left">
	<!-- Don't change this -->
	<div id="site_title">

		<!-- ************** -->
		<!-- Able to change -->
		<h2>${test.testAndQuizzName}:Detail</h2>
		<h6 id="testId" class="hidden">${test.testAndQuizzID}</h6>
	</div>
	<!-- Don't change this -->
	<div id="site_content">
		<div id="btn_control">

			<!-- ************** -->
			<!-- Able to change -->
			<a href="../" class="btn btn-primary btn-sm">Back</a>
		</div>
		<div id="main_content">

			<!-- ************** -->
			<!-- Able to change -->
			<div>
				<a class="addNewPart" href="">Add New Part</a>
			</div>

			<c:forEach var="part" items="${test.listTestPart}">
				<div class="question_part">
					<div class="part_name">
						<ul>
							<li><h6 class="partId hidden">
									<c:out value="${part.testPartId}"></c:out>
								</h6>
								<h3 class="partNum">Part:</h3>
								<h3 class="partName">${part.testPartName}</h3>
							<li class="pull-right"><a href="" class="partEdit"> <i
									class="fa fa-wrench fa-2x"></i><span class="nav-text">Edit</span></a><a
								href="#" class="partRemove"><i class="fa fa-trash fa-2x"></i><span
									class="nav-text">Remove</span></a></li>
						</ul>
					</div>
					<div class="part_content">
						<c:if test="${part.questionPool != null}">
							<div class="choose_pool">
								<fieldset class="input_table">
									<legend>From Pool</legend>
									<div class="input_row hidden">
										<div>Pool ID</div>
										<div>
											<h6 class="poolId">${part.questionPool.questionPoolId}</h6>
										</div>
									</div>
									<div class="input_row">
										<div>
											<h4>Pool Name:</h4>
										</div>
										<div>
											<h4 class="poolName">${part.questionPool.questionPoolName}</h4>
										</div>
									</div>
									<div class="input_row">
										<div>
											<h4>Question:</h4>
										</div>
										<div>
											<h4 class="poolNumber">${part.numberQuestion}</h4>
										</div>
									</div>
									<div class="input_row">
										<div>
                      						<h4>Point/Question: </h4>
										</div>
										<div>
											<h4 class="poolPoint">${part.point}</h4>
										</div>
									</div>
									<div class="input_row">
										<div></div>
										<div>
											<a href="" class="edit">Edit</a>
										</div>
									</div>
								</fieldset>
							</div>
						</c:if>
						<c:if test="${part.questionPool == null}">
							<c:forEach var="question" items="${part.listQuestionDTO}">
								<c:choose>
									<c:when test="${question.type == 1}">
										<div class="add_question">
											<a class="addQuestion" href="#">Add Question</a>
										</div>
										<div class="question">
											<div class="question_number">
												<ul>
													<li><h6 class="questionId hidden">${question.questionId}</h6>
														<h5 class="questionNum">Question 2:</h5></li>
													<li><b style="margin-left: 10px;"><i>${question.point} Point</i></b></li>
													<li class="pull-right"><a class="editQuestion" href="">Edit</a><a
														class="removeQuestion" href="">Remove</a></li>
												</ul>
											</div>
											<div class="question_name">${question.question}</div>

											<div class="question_answer">
												<c:choose>
													<c:when test="${question.rightAnswer == 'A'}">
														<div>
															<input type="radio" checked disabled>A. True
														</div>
														<div>
															<input type="radio" disabled>B. False
														</div>
													</c:when>
													<c:otherwise>
														<div>
															<input type="radio" disabled>A. True
														</div>
														<div>
															<input type="radio" checked disabled>B. False
														</div>
													</c:otherwise>
												</c:choose>
											</div>
										</div>
									</c:when>
									<c:when test="${question.type == 2}">
										<div class="add_question">
											<a class="addQuestion" href="#">Add Question</a>
										</div>
										<div class="question">
											<div class="question_number">
												<ul>
													<li><h6 class="questionId hidden">${question.questionId}</h6>
														<h5 class="questionNum">Question 2:</h5></li>
													<li><b style="margin-left: 10px;" class="point"><i>${question.point} Point</i></b></li>
													<li class="pull-right"><a class="editQuestion" href="">Edit</a><a
														class="removeQuestion" href="">Remove</a></li>
												</ul>
											</div>
											<div class="question_name">${question.question}</div>

											<div class="question_answer">
												<div>
													<input type="radio"
														<c:if test="${question.rightAnswer == 'A'}">checked</c:if>
														disabled>A. ${question.answers[0]}
												</div>
												<div>
													<input type="radio"
														<c:if test="${question.rightAnswer == 'B'}">checked</c:if>
														disabled>B. ${question.answers[1]}
												</div>
												<div>
													<input type="radio"
														<c:if test="${question.rightAnswer == 'C'}">checked</c:if>
														disabled>C. ${question.answers[2]}
												</div>
												<div>
													<input type="radio"
														<c:if test="${question.rightAnswer == 'D'}">checked</c:if>
														disabled>D. ${question.answers[3]}
												</div>
											</div>
										</div>
									</c:when>
									<c:when test="${question.type == 3}">
										<div class="add_question">
											<a class="addQuestion" href="#">Add Question</a>
										</div>
										<div class="question">
											<div class="question_number">
												<ul>
													<li><h6 class="questionId hidden">${question.questionId}</h6>
														<h5 class="questionNum">Question 2:</h5></li>
													<li><b style="margin-left: 10px;"><i>${question.point} Point</i></b></li>
													<li class="pull-right"><a class="editQuestion" href="">Edit</a><a
														class="removeQuestion" href="">Remove</a></li>
												</ul>
											</div>
											<div class="question_name">${question.question}</div>

											<div class="question_answer">
												<div>
													<input type="checkbox"
														<c:if test="${fn:contains(question.rightAnswer, 'A')}">checked</c:if>
														disabled>A. ${question.answers[0]}
												</div>
												<div>
													<input type="checkbox"
														<c:if test="${fn:contains(question.rightAnswer, 'B')}">checked</c:if>
														disabled>B. ${question.answers[1]}
												</div>
												<div>
													<input type="checkbox"
														<c:if test="${fn:contains(question.rightAnswer, 'C')}">checked</c:if>
														disabled>C. ${question.answers[2]}
												</div>
												<div>
													<input type="checkbox"
														<c:if test="${fn:contains(question.rightAnswer, 'D')}">checked</c:if>
														disabled>D. ${question.answers[3]}
												</div>
											</div>
										</div>
									</c:when>
								</c:choose>
							</c:forEach>
							<div class="add_question">
								<a href="" class="addQuestion">Add Question</a>
							</div>
						</c:if>
					</div>
				</div>
				<div>
					<a class="addNewPart" href="">Add New Part</a>
				</div>
			</c:forEach>
		</div>
		<div id="table">

			<!-- ************** -->
			<!-- Able to change -->
		</div>

	</div>
</div>

